<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>数据分析</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <th:block th:include="include :: header('数据分析')" />
    <style type="text/css">
        .alert{
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid transparent;;
            border-radius: 4px;
        }

    </style>
</head>

<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label style="width: 100px">年份：</label>
                            <input type="text" id="yearSearch" name="yearSearch"/>
                        </li>
                        <li>
                            <label style="width: 100px">月份：</label>
                            <input type="text" id="monthSearch" name="monthSearch"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            <!--<a class="btn btn-danger btn-rounded btn-sm" onclick="$.table.exportExcel()">
                                <i class="fa fa-download"></i> 导出
                            </a>-->
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="col-sm-12 select-table table-bordered">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
     <th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-table-export-js" />
     <script th:inline="javascript">
	    $('#pay-qrcode').click(function(){
	        var html=$(this).html();
	        parent.layer.open({
	            title: false,
	            type: 1,
	            closeBtn:false,
	            shadeClose:true,
	            area: ['600px', '360px'],
	            content: html
	        });
	    });

        var prefix = ctx + "zsyh/report";

        $(function() {
            var options = {
                url: prefix + "/listAgentReport",
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                searchOnEnterKey:true,
                showExport: true,
                exportUrl: prefix + "/exportAgent",
                modalName: "数据统计",
                exportOptions: {
                    /*ignoreColumn: [0],  //忽略第一列和最后一列*/
                    fileName: '产品订购统计表',  //文件名称设置
                    worksheetName: 'sheet1',  //表格工作区名称
                    tableName: '产品订购统计表',
                    excelstyles: ['background-color', 'color', 'font-size', 'font-weight', 'border-top'],
                    onMsoNumberFormat: DoOnMsoNumberFormat
                },
                responseHandler: function (res) {
                    return res.data;
                },
                columns: [{
                    field : 'Number',
                    title : '序号',
                    align: 'center',
                    width: 20,
                    formatter : function(value, row, index) {
                        var pageSize = $('#bootstrap-table').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                        var pageNumber = $('#bootstrap-table').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
                        return pageSize * (pageNumber - 1) + index + 1;//返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                    }
                },
                    {
                        field: 'factoryName',
                        align: 'center',
                        title: '厂家名称'
                    }
                    ,
                    {
                        field: 'partsName',
                        align: 'center',
                        title: '产品名称'
                    }
                    ,{
                        field: 'attributeName',
                        align: 'center',
                        title: '规格名称'
                    }
                    ,
                    {
                        field: 'orderCount',
                        align: 'center',
                        title: '预定数量'
                    },
                    {
                        field: 'orderPrice',
                        align: 'center',
                        title: '预定金额'
                    },
                    {
                        field: 'orderSellCount',
                        align: 'center',
                        title: '发货数量'
                    },
                    {
                        field: 'orderSellPrice',
                        align: 'center',
                        title: '发货金额'
                    },
                    ],
                onLoadSuccess: function (res) {//当所有数据被加载时触发处理函数
                    var data = $('#bootstrap-table').bootstrapTable('getData', true);//获取当前页数据
                    mergeCells(data,'factoryName',1,$('#bootstrap-table'));
                    mergeCells(data,'partsName',1,$('#bootstrap-table'));
                    debugger;
                },
            };
            $.table.init(options);
        });

        function DoOnMsoNumberFormat(cell, row, col) {
            var result = "";
            if (row > 0 && col == 0)
                result = "\\@";
            return result;
        }
        /**
         * 合并单元格
         * @param data 原始数据（在服务端完成排序）
         * @param fieldName 合并属性名称
         * @param colspan 合并列
         * @param target 目标表格对象
         */
        function mergeCells(data,fieldName,colspan,target){
            //声明一个map计算相同属性值在data对象出现的次数和
            var sortMap = {};
            for(var i = 0 ; i < data.length ; i++){
                for(var prop in data[i]){
                    if(prop == fieldName){
                        var key = data[i][prop]
                        if(sortMap.hasOwnProperty(key)){
                            sortMap[key] = sortMap[key] * 1 + 1;
                        } else {
                            sortMap[key] = 1;
                        }
                        break;
                    }
                }
            }
            for(var prop in sortMap){
                console.log(prop,sortMap[prop])
            }
            var index = 0;
            for(var prop in sortMap){
                var count = sortMap[prop] * 1;
                $(target).bootstrapTable('mergeCells',{index:index, field:fieldName, colspan: colspan, rowspan: count});
                index += count;
            }
        }

    </script>
</body>
</html>
